.formContainer {
  padding: 16px;
  background-color: var(--theme-bg-secondary);
  height: 100vh;
  overflow-y: auto;

  .imageItem {
    :global {
      .adm-form-item-child {
        width: 66px;
        height: 66px;

        .adm-form-item-child-inner {
          width: 100%;
          height: 100%;
          background: var(--theme-bg-secondary);
          padding: 0;
          border-radius: 50%;

          .adm-image-uploader-cell {
            width: 66px;
            height: 66px;
            border-radius: 50%;

            .adm-image-uploader-cell-image {
              width: 100%;
              height: 100%;
            }

            .adm-image-uploader-upload-button-icon {
              line-height: 66px;
            }

            .adm-image-uploader-cell-delete {
              top: 8px;
              right: 10px;
              border-radius: 50%;
            }
          }
          .adm-image-uploader-upload-button-wrap .adm-image-uploader-input {
            display: block !important;
          }
        }
      }
    }
  }

  :global {
    .adm-form-item {
      --padding-left: 16px;
      --padding-right: 16px;

      .adm-form-item-child-inner {
        background: var(--theme-bg-secondary);
        border-radius: 4px 4px 4px 4px;
        padding: 16px 20px;
      }
    }

    .adm-input,
    .adm-text-area {
      --font-size: 12px;
      font-weight: bold;
      color: var(--theme-text-secondary);
    }

    .adm-button {
      font-size: 16px;
    }
    .adm-collapse-panel-content {
      .adm-collapse-panel-content-inner {
        .adm-list-item-content-main {
          .adm-list-item {
            padding-left: 0;
          }
        }
      }
    }
  }

  .roleListWrapper {
    width: 100%;

    .roleListTopWrapper {
      display: flex;

      .roleImageItem {
        // :global {
        //   .adm-form-item-child {
        //     width: 48px;
        //     height: 48px;

        //     .adm-form-item-child-inner {
        //       width: 100%;
        //       height: 100%;
        //       background: var(--theme-bg-secondary);
        //       padding: 0;
        //       border-radius: 50%;

        //       .adm-image-uploader-cell {
        //         width: 48px;
        //         height: 48px;
        //         border-radius: 50%;

        //         // .adm-image-uploader-upload-button-icon {
        //         //   line-height: 48px !important;
        //         // }
        //         .adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button {
        //           line-height: 48px;
        //         }
        //       }
        //     }
        //   }
        // }
        :global {
          .adm-form-item-child {
            width: 48px;
            height: 48px;
    
            .adm-form-item-child-inner {
              width: 100%;
              height: 100%;
              background: var(--theme-bg-secondary);
              padding: 0;
              border-radius: 50%;
    
              .adm-image-uploader-cell {
                width: 48px;
                height: 48px;
                border-radius: 50%;
    
                .adm-image-uploader-cell-image {
                  width: 100%;
                  height: 100%;
                }
    
                .adm-image-uploader-upload-button-icon {
                  line-height: 48px;
                }
    
                .adm-image-uploader-cell-delete {
                  top: 5px;
                  right: 7px;
                  border-radius: 50%;
                }
              }
              .adm-image-uploader-upload-button-wrap .adm-image-uploader-input {
                display: block !important;
              }
            }
          }
        }
      }

      .roleNameItem {
        flex: 1;
        padding-left: 0;
      }
    }
  }

  .expandableSection {
    margin-bottom: 16px;
    background-color: var(--theme-text-primary);
    border-radius: 8px;
    overflow: hidden;
    .addRoleHeader {
      padding: 15px 15px;
    }
    .roleListWrapper {
      background-color: red;
      width: 100%;

      .roleListTopWrapper {
        display: flex;

        .roleImageItem {
          :global {
            .adm-form-item-child {
              width: 48px;
              height: 48px;

              .adm-form-item-child-inner {
                width: 100%;
                height: 100%;
                background: var(--theme-bg-secondary);
                padding: 0;
                border-radius: 50%;

                .adm-image-uploader-cell {
                  width: 48px;
                  height: 48px;
                  border-radius: 50%;

                  // .adm-image-uploader-upload-button-icon {
                  //   line-height: 48px !important;
                  // }
                  .adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button {
                    line-height: 48px;
                  }
                }
              }
            }
          }
        }

        .roleNameItem {
          flex: 1;
          padding-left: 0;
        }
      }
    }

    :global {
      .adm-list-card {
        padding: 0 !important;
        margin: 0 !important;

        .adm-list-body {
          border-radius: 0 !important;
        }
      }
      .adm-list-header {
        padding: 0;
      }
    }
  }
}



.sectionHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: bold;
  // background-color: var(--theme-bg-secondary);
  cursor: pointer;
}



.footer {
  display: flex;
  flex-direction: column;
  align-items: center;

}

.disclaimer {
  font-size: 12px;
  color: var(--theme-text-muted);
  margin-bottom: 16px;
}

.submitButton {
  width: 100%;
  color: white;
  width: 200px;
  height: 40px;
  background: var(--adm-color-primary);
  border-radius: 50px 50px 50px 50px;
  margin-bottom: 60px;
}